<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
<el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <el-form  :inline="true"  label-width="80px" class="demo-form-inline" :model="form">
  <el-form-item label="学科名称">
    <el-input  style="width:200px"  v-model="form.subjectName"></el-input>
    </el-form-item>
    <el-form-item>
  <el-button type="primary" @click="qinchu1">清除</el-button>
    <el-button  @click="search">搜索</el-button>
</el-form-item>
   </el-form>
      </el-col>
      <el-col>
       <el-row type="flex" justify="end">
         <el-button size="medium " type="success" @click="addSubject"   icon="el-icon-edit">新增学科</el-button>
        </el-row>
      </el-col>
    </el-row>

 <div class="before">
    <i class="el-icon-info" />
 <span>共{{ page.counts }}条记录</span>
    </div>
       <el-table border  :data="list">
          <el-table-column label="序号"  type="index"  width="50"/>
          <el-table-column label="学科名称" prop="subjectName"  width="80"/>
          <el-table-column label="创建者" prop="username" width="100">
          </el-table-column>
          <el-table-column label="创建日期" prop="addDate" >
             <template v-slot="{row}">
              {{ row.addDate |formatDate('yyyy-MM-dd hh:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示" prop="isFrontDisplay"   width="80"  >
             <template v-slot="{ row }">
              <span>{{row.isFrontDisplay===1?"是":"否"}}</span>
                 </template>
          </el-table-column>
          <el-table-column label="二级目录"  prop="twoLevelDirectory" width="100" />
          <el-table-column label="标签" prop="tags"  width="60" />
          <el-table-column label="题目数量" prop="totals"  width="100"/>
          <el-table-column label="操作" >
               <template v-slot="{ row }">
             <el-button type="text" size="small" @click="$router.push(`directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
              <el-button type="text" size="small" @click="$router.push(`tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
              <el-button type="text" size="small" @click="editRole(row)" >修改</el-button>
              <el-button type="text" size="small" @click="remove(row)">删除</el-button>
        </template>
          </el-table-column>
       </el-table>
       <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :total="page.counts"
            :current-page="page.page"
            :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 50]"
            background
            layout="total,sizes,prev,pager,next,jumper"
  @current-change="changePage"
     @size-change="changesize"
          />
        </el-row>
      </el-card>
<subjectsadd :showDialog.sync="showDialog" :data1="formData"></subjectsadd>
    </div>
  </div>
</template>

<script>
import { list, remove, detail } from '@/api/hmmm/subjects'
import subjectsadd from '@/module-hmmm/components/subjects-add.vue'
export default {
  components: { subjectsadd },

  data () {
    return {
      list: [], // 从接口处取回
      page: {
        page: 1,
        pagesize: 10,
        counts: 0
      },
      showDialog: false,
      formData: {
        subjectName: '',
        isFrontDisplay: ''
      },
      form: {
        subjectName: ''
      }
    }
  },
  created () {
    this.list1()
  },
  methods: {
    // 添加
    addSubject () {
      this.showDialog = true
      this.formData = {}
    },
    async list1 () {
      const res = await list(this.page)
      // console.log(res)
      this.list = res.data.items
      this.page.counts = res.data.counts
    },
    changesize (newSize) {
      this.page.pagesize = newSize
      // 参数最新的页码后，重新调用接口
      this.list1()
    },
    // 控制页码的切换
    changePage (page) {
      // 参数path表示什么，最新的页码
      this.page.page = page
      // 参数最新的页码后，重新调用接口
      this.list1()
    },
    // 编辑获取到数据
    async  editRole (id) {
      const res = await detail(id)
      this.formData = res.data
      this.showDialog = true
    },
    // 删除
    remove (row) {
      this.$confirm('是否要删除').then(() => {
        return remove(row)
      }).then(() => {
        this.$message.success('删除成功')
        // 设置分页必须的业务
        if (this.list.length === 1 && this.page.page > 1) {
          this.page.page -= 1
        }
        this.list1()
      })
    },
    async  search () {
      const res = await list(this.form)
      // console.log(res)
      this.list = res.data.items
      this.form.subjectName = ''
    },
    qinchu1 () {
      this.formData.subjectName = ''
      this.list1()
    }

  }
}
</script>

<style scoped>
.before{
  background-color:#f4f4f5 ;
  color: #909399;
}
</style>
